/**
 * Created by Administrator on 2017/3/27.
 */
/**
 * Created by Administrator on 2017/3/27.
 */

//使用js完成动画
var MyComponent = React.createClass({
    getDefaultProps:function () {
        return {
            position:100,
            time:10
        }
    },
    getInitialState:function () {
        return {position:0}
    },
    render:function () {
        var style={
            marginLeft : this.state.position
        }
        return <div style={style}>
            this will animate
        </div>
    },
    transformComponent : function () {
        if (this.state.position < this.props.position){
            this.setState({
                position:this.state.position+1
            })
        }else {
            //完成动画，取消定时器
            clearInterval(this.timer)
        }
    },
    // componentDidMount:function () {
    //     if (this.props.position){
    //         this.timer= setInterval(this.transformComponent, this.props.time);
    //     }
    // }
    componentDidUpdate:function () {
        if (this.props.position){
            //requestAnimationFrame浏览器可以优化并行的动画动作，更合理的重新排列动作序列
            //并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。\
            //如果浏览设备绘制间隔是16.7ms，那我就这个间隔绘制，减少过度绘制
            requestAnimationFrame(this.transformComponent);
        }
    }
});

ReactDOM.render(<MyComponent></MyComponent>,document.body);
ReactDOM.render(<MyComponent postion={200} time={5}></MyComponent>,document.body);